<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>早分享</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#box:after{
			content:"";
			display:block;
			clear: both;
		}
	
		#show,#hide{
			position:relative;
			float: left;
			margin-left:5px;

		}
		#show>img{
			width:300px;
		}
		
		#show>span{
			position:absolute;
			left:0;
			top:0; 

			width:50px;
			height:30px;
			/*background:rgba(62, 55, 58, 0.4);*/
			background:red;
			opacity:0.5;

			display:none;
		}
		
		#hide{
			width:500px;
			height:300px;
			
			overflow: hidden;

			display:none;
			/*display:block;*/

		}
		
		#hide>img{
			width:3000px;

			position:absolute;
			left:0;
			top:0;
		}

	</style>

	<script type="text/javascript">
		window.onload=function(){

			var span=document.querySelector('span');
			var hide=document.querySelector('#hide');
			var show=document.querySelector('#show');
			var img1=document.querySelector('#show img');
			var img2=document.querySelector('#hide img');

			var x,y;

			
			// span.onmouseover=function(ev){
				// hide.style.display="block";
			// } 
			img1.onmouseover=function(){
				hide.style.display="block";
				span.style.display="inline-block";
		
				document.onmousemove=function(ev){
					var e=ev || event;

					var left=e.clientX-span.offsetWidth/2;
					var top=e.clientY-span.offsetHeight/2;

					if(left<0){
						left=0;
					}
					if (left>img1.offsetWidth-span.offsetWidth) {
						left=img1.offsetWidth-span.offsetWidth;
					};
					if(top<0){
						top=0;
					}
					if (top>img1.offsetHeight-span.offsetHeight) {
						top=img1.offsetHeight-span.offsetHeight;
					};
					span.style.left=left + 'px';
					span.style.top=top + 'px';

					img2.style.left=-left*(img2.offsetWidth/img1.offsetWidth)+"px";
					img2.style.top=-top*(img2.offsetHeight/img1.offsetHeight)+"px";
				}
			}
			span.onmouseout=function(){
				document.onmousemove=null;

				hide.style.display="none";
				span.style.display="none";
			}

		}
	</script>
</head>
<body>
	<div id="box">
		<div id="show">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489083204637&di=244fe324db033fc826de48e90d2373f0&imgtype=0&src=http%3A%2F%2Fpic2015.5442.com%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg"
	   		 >
			<span></span>
		</div>

		<div id="hide">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489083204637&di=244fe324db033fc826de48e90d2373f0&imgtype=0&src=http%3A%2F%2Fpic2015.5442.com%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg">
		</div>
	</div>
	
</body>
</html>